<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div class="col-lg-9" th:fragment="topbar">-->
<div th:fragment="topbar">
    <header>
        <div class="header-top bg-white">
            <div class="container">
                <div class="row align-items-center justify-content-between g-0 g-lg-2">
                    <div class="col-lg-2">
                        <div class="d-flex flex-wrap justify-content-between align-items-center py-3 py-lg-0">
                            <div class="logo-area">
                                <div class="logo">
                                    <a th:href="@{/}"><img th:src="@{mallcss/images/logo/01.png}" alt="logo"></a>
                                </div>
                            </div>
                            <div class="button-group">
                                <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                        aria-expanded="false" aria-label="Toggle navigation"><span
                                        class="icofont-navigation-menu"></span></button>

                                <button class="navbar-toggler d-lg-none ms-2" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2"
                                        aria-expanded="false" aria-label="Toggle navigation"><span
                                        class="icofont-info-square"></span></button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-none d-lg-block">
                            <div class="search-area d-flex flex-wrap align-items-center">
                                <div class="sa-cate">
                                    <select>
                                        <option value="all">All Categories</option>
                                        <option value="2">Home</option>
                                        <option value="3">-Shop</option>
                                        <option value="4">--Sport &amp; Entertaiment</option>
                                        <option value="5">--T-shirts</option>
                                        <option value="6">-- -Motorcycles</option>
                                        <option value="7">-- -Blouses</option>
                                        <option value="114"> -Car Lights</option>
                                        <option value="115"> -Car Accessories</option>
                                        <option value="129"> -Football</option>
                                        <option value="131"> -Kick Boxing</option>
                                        <option value="8"> -Fashion</option>
                                        <option value="9"> -Men Fashion</option>
                                    </select>
                                </div>
                                <form action="#" class="d-flex flex-wrap" th:action="@{/search}+${1}">
                                    <input type="text" placeholder="What are you looking for ?" name="keyword">
                                    <button type="submit">Search Now <i class="icofont-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="d-none d-lg-block">
                            <div class="others-area">
                                <ul class="navbar-nav flex-row justify-content-between">
                                    <li class="text-center user-menu nav-item">
                                        <div class="user-prof">
                                            <i class="icofont-user-alt-3"></i>
                                            <span class="d-block">用户</span>
                                            <div class="user-content" sec:authorize="!isAuthenticated()">
                                                <p>操作</p>
                                                <ul class="user-reg">
                                                    <li><a th:href="@{/toLogin}">登录</a> </li>
                                                    <li>
                                                        <p class="mb-0"> or </p>
                                                    </li>
                                                    <li><a th:href="@{/toRegister}">注册</a> </li>
                                                </ul>
                                                <div class="log-with-social">
                                                    <p>其他方式登录</p>
                                                    <ul class="social-log-list">
                                                        <li class="social-log"><a href="#"><i
                                                                class="icofont-facebook"></i></a></li>
                                                        <li class="social-log"><a href="#"><i
                                                                class="icofont-google-plus"></i></a></li>
                                                        <li class="social-log"><a href="#"><i
                                                                class="icofont-linkedin"></i></a></li>
                                                        <li class="social-log"><a href="#"><i
                                                                class="icofont-twitter"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="user-content" sec:authorize="isAuthenticated()">
                                                <p>操作</p>
                                                <ul class="user-reg">
                                                    <li><a th:href="@{/toMy}">我发布的</a> </li>
                                                    <li>
                                                        <p class="mb-0"> or </p>
                                                    </li>
                                                    <li><a th:href="@{/logout}">注销</a> </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="text-center nav-item" sec:authorize="hasRole('vip1')">
                                        <a th:href="@{/toCart}" class="">
                                            <i class="icofont-shopping-cart"></i>
                                            <span class="d-block">购物车</span>
                                        </a>
                                    </li>
                                    <li class="text-center nav-item" sec:authorize="hasRole('vip1')">
                                        <a th:href="@{/toAdd}" class="">
                                            <i class="icofont-spinner-alt-3"></i>
                                            <span class="d-block">发布</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>
<div th:fragment="footbar">
    <footer class="overflow-hidden">
        <div class="footer-top py-5 border-top bg-img" data-background="mallcss/images/bg-img/02.jpg">
            <div class="container">
                <div class="row justify-content-center row-cols-md-3 row-cols-xl-6 row-cols-1 g-xl-2 g-5">
                    <div class="col">
                        <div class="ft-items">
                            <div class="ft-title mb-4">
                                <h5>All Technology</h5>
                            </div>
                            <div class="ft-body">
                                <ul class="navbar-nav">
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Tablet Accessories</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Accessories</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Power Banks</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Phone Cases</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Mobiles</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Tablets</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="ft-items">
                            <div class="ft-title mb-4">
                                <h5>Women’s Fashion</h5>
                            </div>
                            <div class="ft-body">
                                <ul class="navbar-nav">
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Fabulous Floral Up to
                                        70%</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Cheongsam</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Back to Black</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">5 Stars Rating!</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Dresses</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Tops</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="ft-items">
                            <div class="ft-title mb-4">
                                <h5>Home And Living</h5>
                            </div>
                            <div class="ft-body">
                                <ul class="navbar-nav">
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Air Conditioners</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Air Purifiers</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Fans</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Freezers</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Microwave & Ovens</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Refrigerators</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="ft-items">
                            <div class="ft-title mb-4">
                                <h5>Health And Beauty</h5>
                            </div>
                            <div class="ft-body">
                                <ul class="navbar-nav">
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Treatments & Serum</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Moisturisers & Cream</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Toners</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Face Cleansers</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Face Masks</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Gifts & Value Sets</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="ft-items">
                            <div class="ft-title mb-4">
                                <h5>Baby And Toddler</h5>
                            </div>
                            <div class="ft-body">
                                <ul class="navbar-nav">
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Diapering & Potty</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Disposable Diapers</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Diaper Bags</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Cloth Diapers</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Baby Gear</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Support baby</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="ft-items">
                            <div class="ft-title mb-4">
                                <h5>Sports And Outdoors</h5>
                            </div>
                            <div class="ft-body">
                                <ul class="navbar-nav">
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Exercise & Fitness</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Cardio Equipment</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Strength Equipment</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Fitness Accessories</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Weight</a></li>
                                    <li class="nav-item"><a href="#" class="d-inline-block p-1">Yoga</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom py-3">
            <div class="container">
                <div class="row flex-row justify-content-between align-items-center">
                    <div class="copyright-area w-auto">
                        <p class="mb-0">All Rights Reserved. Designed By <a href="http://www.bootstrapmb.com/">bootstrapmb</a></p>
                    </div>
                    <div class="sponsor-area w-auto d-none d-lg-block">
                        <a href="#"><img src="mallcss/images/sponsor/01.png" alt="sponsor-image"></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
</html>
